import React, { useState, useEffect } from 'react';
import { 
  Card, 
  Select, 
  Button, 
  Typography, 
  Space, 
  Divider, 
  Tooltip,
  Input,
  message
} from 'antd';
import { 
  SaveOutlined, 
  PlusOutlined, 
  InfoCircleOutlined 
} from '@ant-design/icons';

const { Option } = Select;
const { Text, Title } = Typography;

/**
 * 关系和聊天目标设置面板组件
 */
const RelationshipPanel = ({
  contactId,
  contactName,
  relationshipTypes = [],
  chatGoals = [],
  selectedRelationship,
  selectedGoal,
  onSave
}) => {
  const [relationship, setRelationship] = useState(selectedRelationship);
  const [goal, setGoal] = useState(selectedGoal);
  const [customRelationship, setCustomRelationship] = useState('');
  const [customGoal, setCustomGoal] = useState('');
  const [addingCustomRelationship, setAddingCustomRelationship] = useState(false);
  const [addingCustomGoal, setAddingCustomGoal] = useState(false);
  
  // 监听传入的值变化
  useEffect(() => {
    setRelationship(selectedRelationship);
  }, [selectedRelationship]);
  
  useEffect(() => {
    setGoal(selectedGoal);
  }, [selectedGoal]);
  
  // 添加自定义关系类型
  const handleAddCustomRelationship = () => {
    if (!customRelationship.trim()) {
      message.warning('请输入自定义关系类型');
      return;
    }
    
    // 这里仅在前端添加，实际应用中应该调用API保存到后端
    message.success(`添加了自定义关系类型: ${customRelationship}`);
    setRelationship(`custom_${Date.now()}`);
    setCustomRelationship('');
    setAddingCustomRelationship(false);
  };
  
  // 添加自定义聊天目标
  const handleAddCustomGoal = () => {
    if (!customGoal.trim()) {
      message.warning('请输入自定义聊天目标');
      return;
    }
    
    // 这里仅在前端添加，实际应用中应该调用API保存到后端
    message.success(`添加了自定义聊天目标: ${customGoal}`);
    setGoal(`custom_${Date.now()}`);
    setCustomGoal('');
    setAddingCustomGoal(false);
  };
  
  // 保存设置
  const handleSave = () => {
    if (!relationship) {
      message.warning('请选择或添加关系类型');
      return;
    }
    
    if (!goal) {
      message.warning('请选择或添加聊天目标');
      return;
    }
    
    onSave(relationship, goal);
    message.success('设置已保存');
  };
  
  // 渲染自定义关系类型输入框
  const renderCustomRelationshipInput = () => (
    <div className="custom-input-container">
      <Input
        placeholder="输入自定义关系类型"
        value={customRelationship}
        onChange={e => setCustomRelationship(e.target.value)}
        onPressEnter={handleAddCustomRelationship}
      />
      <div className="custom-input-actions">
        <Button 
          type="primary" 
          size="small" 
          onClick={handleAddCustomRelationship}
        >
          添加
        </Button>
        <Button 
          size="small" 
          onClick={() => setAddingCustomRelationship(false)}
        >
          取消
        </Button>
      </div>
    </div>
  );
  
  // 渲染自定义聊天目标输入框
  const renderCustomGoalInput = () => (
    <div className="custom-input-container">
      <Input
        placeholder="输入自定义聊天目标"
        value={customGoal}
        onChange={e => setCustomGoal(e.target.value)}
        onPressEnter={handleAddCustomGoal}
      />
      <div className="custom-input-actions">
        <Button 
          type="primary" 
          size="small" 
          onClick={handleAddCustomGoal}
        >
          添加
        </Button>
        <Button 
          size="small" 
          onClick={() => setAddingCustomGoal(false)}
        >
          取消
        </Button>
      </div>
    </div>
  );
  
  return (
    <Card 
      title={
        <div>
          <InfoCircleOutlined /> 关系与目标设置
          {contactName && (
            <Text type="secondary" style={{ marginLeft: 8 }}>
              - {contactName}
            </Text>
          )}
        </div>
      }
      className="relationship-panel"
    >
      {!contactId ? (
        <div className="no-contact-selected">
          <Text type="secondary">请先选择联系人</Text>
        </div>
      ) : (
        <>
          {/* 关系类型选择 */}
          <div className="setting-item">
            <Text strong>关系类型</Text>
            <Tooltip title="定义你与该联系人的关系类型，以获得更适合的聊天建议">
              <InfoCircleOutlined style={{ marginLeft: 4 }} />
            </Tooltip>
            
            {addingCustomRelationship ? (
              renderCustomRelationshipInput()
            ) : (
              <Select
                placeholder="选择关系类型"
                style={{ width: '100%' }}
                value={relationship}
                onChange={setRelationship}
                dropdownRender={menu => (
                  <>
                    {menu}
                    <Divider style={{ margin: '8px 0' }} />
                    <Button
                      type="text"
                      icon={<PlusOutlined />}
                      onClick={() => setAddingCustomRelationship(true)}
                      style={{ width: '100%', textAlign: 'left' }}
                    >
                      添加自定义关系类型
                    </Button>
                  </>
                )}
              >
                {relationshipTypes.map(type => (
                  <Option key={type.id} value={type.id}>{type.name}</Option>
                ))}
              </Select>
            )}
          </div>
          
          {/* 聊天目标选择 */}
          <div className="setting-item">
            <Text strong>聊天目标</Text>
            <Tooltip title="设置当前对话的目标，以获得更相关的表达建议">
              <InfoCircleOutlined style={{ marginLeft: 4 }} />
            </Tooltip>
            
            {addingCustomGoal ? (
              renderCustomGoalInput()
            ) : (
              <Select
                placeholder="选择聊天目标"
                style={{ width: '100%' }}
                value={goal}
                onChange={setGoal}
                dropdownRender={menu => (
                  <>
                    {menu}
                    <Divider style={{ margin: '8px 0' }} />
                    <Button
                      type="text"
                      icon={<PlusOutlined />}
                      onClick={() => setAddingCustomGoal(true)}
                      style={{ width: '100%', textAlign: 'left' }}
                    >
                      添加自定义聊天目标
                    </Button>
                  </>
                )}
              >
                {chatGoals.map(goal => (
                  <Option key={goal.id} value={goal.id}>{goal.name}</Option>
                ))}
              </Select>
            )}
          </div>
          
          {/* 保存按钮 */}
          <div className="panel-actions">
            <Button 
              type="primary" 
              icon={<SaveOutlined />} 
              onClick={handleSave}
              disabled={!relationship || !goal}
            >
              保存设置
            </Button>
          </div>
        </>
      )}
    </Card>
  );
};

export default RelationshipPanel; 